<template>
  <div class="dance-music-playlist">
    <div
      class="playlist-item"
      v-for="(item, index) in musiclist"
      :key="index"
      @mouseenter="handleEnter(index)"
      @mouseleave="handleLeave(index)"
      @click="turnDetail(item)"
    >
      <div class="playlist-item-container">
        <!-- 内部图片容器 -->
        <div class="playlist-item-container-group">
          <!-- 当item.copywriter内容为空时，不显示提示内容，只显示播放数，且播放书滑动进入 -->
          <template>
            <transition name="playlist-slide">
              <div
                class="playlist-desc"
                v-show="currentIndex == index && aritist"
              >
                {{ item.copywriter }}
              </div>
            </transition>
          </template>
          <!-- 播放次数 -->
          <transition name="playlist-slide">
            <div
              class="playlist-count"
              v-show="currentIndex != index && aritist"
            >
              <div>
                <i class="iconfont icon-erji"></i>
                {{ item.playCount }}
              </div>
            </div>
          </transition>
          <!-- 查看详情的图标 -->
          <transition name="dance-music-opacity">
            <div
              class="container-detail"
              v-show="currentIndex == index && !aritist"
            >
              <i class="iconfont icon-homeicondetails"></i>
            </div>
          </transition>
          <!-- 图片 -->
          <img v-lazy="item.picUrl || item.coverImgUrl" />
          <!-- 播放按钮 -->
          <transition name="dance-music-opacity">
            <div
              class="playlist-play"
              v-show="currentIndex == index && aritist"
            >
              <i class="iconfont icon-icon_play"></i>
            </div>
          </transition>
        </div>
        <div class="playlist-name">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'musicList',
  data () {
    return {
      currentIndex: null //控制播放显示隐藏 下标
    }
  },
  props: {
    musiclist: {
      type: Array,
      default: []
    },
    aritist: {
      //歌手专用属性
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleEnter (index) {
      //鼠标进入
      this.currentIndex = index
    },
    handleLeave () {
      // 鼠标离开 清空下标
      this.currentIndex = null
    },
    turnDetail (item) {
      // 跳转歌单详情
      if (this.aritist) {
        console.log(item)
        this.$router.push({
          name: 'detail',
          params: {
            id: item.id,
            time: new Date().getTime()
          }
        })
      } else {
        // 跳转歌手详情
        this.$router.push({
          name: 'artistdetail',
          query: {
            artist: JSON.stringify(item) //跳转歌手详情 传递整个歌手对象信息
          }
        })
      }

      // this.$router.push(`/detail/${item.id}/${item.time}`)
    }
  }
}
</script>
<style lang="less" scoped>
.dance-music-playlist {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .playlist-item {
    width: calc(20%);
    padding: 5px 10px;
    img {
      width: 100%;
      border-radius: 4px;
    }
  }
  &-playlist-name-dark {
    color: #ffffff;
  }
}
.playlist-item-container {
  cursor: pointer;
  overflow: hidden;
  &-group {
    position: relative;
  }
}
.playlist-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
}
.playlist-desc {
  width: 100%;
  padding: 5px 0px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 0px;
  font-size: 13px;
}
.playlist-count {
  width: 100%;
  padding: 3px 0px;
  text-align: right;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
  position: absolute;
  top: 0px;
  right: 0;
  color: #f6f6f6;
  font-size: 13px;
}
.playlist-play {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 5px;
  bottom: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  .icon-icon_play {
    font-size: 18px;
    color: var(--main-color);
  }
}
// 动画
.playlist-slide-enter-active {
  animation: slideInDown 0.4s;
}
.playlist-slide-leave-active {
  animation: slideInDown 0.4s reverse;
}
.container-detail {
  position: relative;
  height: 20px;
  width: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  margin: auto;
  i {
    color: green;
    font-size: 30px;
  }
}
</style>
